<style>
.add_user{
  margin: 20px;
  float: left;
}
</style>
<template>
<div>
  <div class="add_user"> <el-button @click="addUser" type="primary">新增用户</el-button></div>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="userName" label="账号" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="300"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
  
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      tableData: []
    };
  },
  created() {
    //加载中加载mapActions里面的函数
    this.getUserList().then(() => {
      // console.log( this.$store.getters.filtUserList)
      this.tableData = this.userList;
      console.log(this.filtUserList);
    });
  },
  //mapState和mapGetters写入计算属性computed
  computed: {
    ...mapState({
      userList: state => state.useslist
    }),
    ...mapGetters(["filtUserList"])
  },
  //mapActions异步请求写入方法里面
  methods: {
    ...mapActions({
      getUserList: "GET_USERLIST"
    }),
    addUser(){
      this.$router.push('/addUser')
    },
    handleClick(row) {
      console.log(row);
      let _this = this;
      this.axios.post("/api/deleteUser", { id: row.id }).then(res => {
        console.log(res);
        this.getUserList().then(() => {
          // console.log( this.$store.getters.filtUserList)
          this.tableData = this.userList;
          console.log(this.filtUserList);
        });
      });
    }
  }
};
</script>